<template>
    <div class="login__wrap">
        <div class="login">
            <div class="login__left">
                <p>家庭医生后台管理系统</p>
            </div>
            <div class="login__right">
                <img src="../assets/login/u408.jpg">
                <h4>欢迎登录</h4>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item prop="tel">
                        <el-input type="text" placeholder="请输入手机号码" v-model="ruleForm.tel" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="pass">
                        <el-input type="password" placeholder="请输入密码" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item class="tip">
                        <input type="checkbox"> <span>我已阅读并同意</span> <a href="javascript:;">《用户隐私政策》</a>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="submit__btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    </el-form-item>
                    <p style="text-align:center;color: #ccc;font-size: 13px;">忘记密码请联系管理员</p>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data() {
        var validateTel = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入手机号码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        return {
            ruleForm: {
                tel: '',
                pass: '',
            },
            rules: {
                tel: [
                    { validator: validateTel, trigger: 'blur' }
                ],
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
            }
        };
    },

    mounted() {

    },

    methods: {
        submitForm(formName) {
            this.$router.push('/main'); // 为了方便暂时直接跳转
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$router.push('/main');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.login__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F2F7FB;
}

.login {
    width: 1200px;
    height: 660px;
    display: flex;

    &>div {
        flex: 1;
    }

    .login__left {
        padding: 22px;
        background: url(../assets/login/u1111.png) no-repeat center center;
        background-color: #2984F8;
        border: none;
        border-radius: 8px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        color: #fff;
    }

    .login__right {
        padding: 22px;
        background-color: #fff;
        border-radius: 8px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;

        img {
            width: 40px;
            height: 40px;
            display: block;
            margin: 110px auto 22px;
        }

        h4 {
            text-align: center;
            font-size: 28px;
            color: #333;
        }
        .el-form{
            width: 335px;
            margin: 50px auto 0;
            .el-input__inner{
                border-radius: 8px;
            }
            .tip{
                display: flex;
                align-items: center;
                font-size: 13px;
                span{
                    color: #c9c9c9;
                }
                a{
                    color: #1877f2;
                }
            }
            .submit__btn{
                width: 100%;
                border-radius: 8px;
                height: 44px;
                color: #fff;
                font-size: 16px;
                background-color: #1877F2;
            }
        }
    }
}
</style>